<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery伪分页效果</title>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body,
        html {
            background-color: #eee;
        }

        .main {
            width: 400px;
            margin: 10px auto;
        }

        .item {
            width: 400px;
            overflow: hidden;
        }

        ul li {
            float: left;
            width: 180px;
            height: 100px;
            background-color: lightcoral;
            margin: 5px 10px 5px 0;
            text-align: center;
            line-height: 100px;
            color: #fff;
            font-size: 48px;
            font-weight: 700;
        }

        .page-btn {
            padding-top: 20px;
        }

        .page-btn a {
            cursor: pointer;
            padding: 5px;
            border: 1px solid #999;
            font-size: 12px;
            color: black;
            padding: 5px 20px;
        }

        .page-box {
            float: right;
        }

        .num {
            padding: 0 10px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="item">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>10</li>
                <li>11</li>
                <li>12</li>
                <li>13</li>
                <li>14</li>
                <li>15</li>
                <li>16</li>
                <li>17</li>
                <li>18</li>
                <li>19</li>
                <li>20</li>
                <li>21</li>
                <li>22</li>
                <li>23</li>
                <li>24</li>
                <li>25</li>
                <li>26</li>
                <li>27</li>
                <li>28</li>
            </ul>
        </div>

        <div class="page-btn">
            <span class="page-box">
                <a href='#' class="prev">上一页</a>
                <span class="num">
                    <span class='cur-page'>1</span>
                    <span>/</span>
                    <span class=total-page>7</span>
                </span>
                <a href='#' class="next">下一页</a>
            </span>
        </div>
    </div>
    <script>

        $('ul li:gt(3)').hide();
        let PageNews = 4;
        let curPageIndex = 1;
        let total = $('ul li').length;
        let totalPage = Math.round(total / PageNews);
        $('.cur-page').text(curPageIndex);
        $('.total-page').text(totalPage);
        
        $('.next').click(() => {
            if (curPageIndex < totalPage) {
                curPageIndex++;
                updateNews();
            }
        });
        $('.prev').click(() => {
            if (curPageIndex > 1) {
                curPageIndex--;
                updateNews();
            }
        });

        function updateNews() {

            $.each($('ul li'), (index, item) => {
                if (index < curPageIndex * PageNews && index >= (curPageIndex - 1) * PageNews) {
                    item.style.display = 'block';
                } else {
                    item.style.display = 'none';
                }
            })
        }

    </script>
</body>

</html>